<!-- 1.组件dom块 -->
<template>
    <div class="login">
        <div class="login-div">
            <el-row>
                <el-col :span="12">
                    <img class="login_img" src="../assets/login_ch.jpg" />
                </el-col>
                <el-col :span="12">
                    <div class="login_form_div">
                        <el-divider content-position="center">
                            <span class="login_title">欢迎登录</span>
                        </el-divider>
                        <el-form
                                class="login_form"
                                ref="login_form"
                                :model="login_form"
                                label-width="70px"
                                :rules="loginRules"
                        >
                            <el-form-item label="用户名" prop="userName">
                                <el-input v-model="login_form.userName"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-top: 30px" label="密码" prop="password">
                                <el-input
                                        type="password"
                                        v-model="login_form.password"
                                ></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-button
                                        class="login_but"
                                        type="primary"
                                        size="medium"
                                        round
                                        @click="toMenu"
                                 >登&nbsp;录</el-button>
                            </el-form-item>
                            <el-form-item style="color: gray; cursor: pointer">
                                <span><i class="el-icon-warning"></i>忘记密码</span>
                                <el-divider direction="vertical"></el-divider>
                                <el-dropdown>
                  <span class="el-dropdown-link">
                    <span><i class="el-icon-magic-stick"></i>账号注册</span>
                  </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-user-solid"
                                        ><span @click="toRegister(1)"
                                        >普通用户</span
                                        ></el-dropdown-item>
                                        <el-dropdown-item
                                                icon="el-icon-office-building"

                                        ><span @click="toRegister(2)"
                                        >管理员</span
                                        ></el-dropdown-item
                                        >
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-divider direction="vertical"></el-divider>
                                <span><i class="el-icon-info"></i>联系我们</span>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 注册页面弹出 -->
        <el-dialog
                :title="register_Type == 1 ? '普通用户注册' : '管理员注册'"
                :visible.sync="dialog.register"
                :modal-append-to-body="false"
                top="30px"
                width="40%"
        >
            <!-- 使用组件 -->
            <div>
                <Register :registerType="register_Type" v-if="dialog.register" @onClose="registerDivClose"></Register>
            </div>
        </el-dialog>
    </div>
</template>

<!-- 引入组件 -->


<!-- 2.逻辑代码块 -->
<script>
    import Register from "../components/register";

    export default {
        name: "login",
        components: {Register},
        data() {
            return {
                //表单数据对象
                login_form: {
                    userName: "",
                    password: "",
                },
                loginRules:{
                    //校验用户名
                    userName:[
                        { required: true, message: '用户名不能为空', trigger: 'blur' },
                        { min: 2, max: 6, message: '长度在 2到 6个字符', trigger: 'blur' }
                    ],
                    //校验密码
                    password:[
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6到 12 个字符', trigger: 'blur' }
                    ]
                },
                register_Type: 1,
                dialog: {
                    register: false,
                },
            };
        },
        methods: {
            //跳转到主页面
            toMenu(){
                this.$refs.login_form.validate(async valid=>{
                    // console.log(valid)
                    if(!valid) return;
                    const {data:res}=await this.$http.post("login",this.login_form);//访问后台
                    console.log(res);
                    if(res=="success"){
                        this.$message.success("登录成功！！！");
                        await this.$router.push({path: '../menu'});
                        window.sessionStorage.setItem("user",res.user);//存储user对象
                        console.log(res.user);
                    }else if(res=="pwderror"){
                        this.$message.error("密码错误！！！");
                    }else if(res=="error"){
                        this.$message.error("用户名错误！！！")
                    }
                })

            },
            //跳转到注册页面
            toRegister: function (type) {
                this.register_Type = parseInt(type);
                this.dialog.register = true;
            },
            registerDivClose: function (res) {
                this.dialog.register = false;
            },
        },
    };
</script>

<!-- 3.样式块 -->
<style scoped>
    .login {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-image: linear-gradient(to bottom, #bfdbfe, #95c4ff);
    }
    .login-div {
        background-color: #ffffff;
        width: 840px;
        height: 430px;
        padding: 30px;
        position: relative;
        top: 21%;
        left: 26%;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }
    .login_img {
        margin-top: 20px;
        border-radius: 10px;
        width: 100%;
        height: 400px;
    }
    .login_form_div {
        padding: 40px 40px 0px 40px;
    }
    .login_title {
        font-size: 30px;
    }
    .login_form {
        margin-top: 80px;
    }
    .login_but {
        font-size: 19px;
        width: 250px;
        height: 50px;
        margin-top: 30px;
    }
</style>
